<html>
<head>
    <title>Title</title>

    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>

    <script src="../repository/three.js-r102/build/three.js"></script>
    <script src="../repository/three.js-r102/examples/js/controls/OrbitControls.js"></script>
    <script src="../repository/three.js-r102/examples/js/loaders/OBJLoader.js"></script>
    <script src="../repository/three.js-r102/examples/js/loaders/DDSLoader.js"></script>
    <script src="../repository/three.js-r102/examples/js/loaders/MTLLoader.js"></script>
</head>
<body>
<script>
    const scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshLambertMaterial({color: 0x0000ff});
    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    const pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(400, 200, 300);
    scene.add(pointLight);

    const ambientLight = new THREE.AmbientLight(0x444444);
    scene.add(ambientLight);


    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 150;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1);


    document.body.append(renderer.domElement);

    // function render() {
    //     mesh.rotateX(0.01);
    //     // mesh.rotateY(0.01);
    //     renderer.render(scene, camera);
    //     requestAnimationFrame(render);
    // }
    //
    // render();

    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    function onMouseClick(event){

        // //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
        //
        // mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        // mouse.y = (event.clientY/window.innerHeight) *2 + 1;
        //
        // // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
        // raycaster.setFromCamera( mouse, camera );
        //
        // console.log(raycaster)
        //
        //
        //
        // // 获取raycaster直线和所有模型相交的数组集合
        // const intersects = raycaster.intersectObjects(scene.children);
        // console.log(intersects);
        //
        // //将所有的相交的模型的颜色设置为红色
        // for (let i = 0; i < intersects.length; i++ ) {
        //     intersects[ i ].object.material.color.set( 0xff0000 );
        //
        // }
        scene.children[0].material.color.set(0xff0000);
    }

    window.addEventListener( 'click', onMouseClick, false );

    function render() {
        mesh.rotateX(0.01);
        // mesh.rotateY(0.01);
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    render();

</script>
</body>
</html>